import React, { Component } from 'react';
import { NavBar, SearchBar, Toast } from 'antd-mobile';
import { DeleteOutline } from 'antd-mobile-icons';
import { good_search } from "../../utils/api";

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searinput: "",
            seacrlist: localStorage.getItem("seacrlist") ? JSON.parse(localStorage.getItem("seacrlist")) : [],  //保存搜索历史记录
            seargoodlist: []
        }
    }
    back() {
        this.props.history.go(-1)
    }

    clearsearch() {
        this.setState({
            seacrlist: []
        }, () => {
            localStorage.setItem("seacrlist", JSON.stringify(this.state.seacrlist))
        })
    }

    //回车时获取inpu框值 
    getValue(e) {
        console.log(e);
        //回车将数据e添加在seacrlist数组中，
        let arr = this.state.seacrlist

        //判断记录中有则不在添加
        if (arr.indexOf(e) == -1) {
            arr.push(e)
        }

        //把添加的数组更新保存在state中,方便页面渲染
        this.setState({
            seacrlist: arr,
        }, () => {
            //保存在本地存储，用来渲染最近搜索记录
            localStorage.setItem("seacrlist", JSON.stringify(this.state.seacrlist))
        })

        good_search({ params: { searchkey: e, page: 1, count: 6 } }).then((res) => {
            //如果有数据，渲染
            if (res.data.list.length > 0) {
                console.log(res.data.list);
                this.setState({
                    seargoodlist: res.data.list
                })
            } else {
                Toast.show({
                    icon: 'fail',
                    content: '该类型暂无商品',
                })
            }

        })
    }

    //点击渲染的商品进入对应的商品详情
    getgoodintrs(id) {
        this.props.history.push(`/goodsdetil/id=${id}`)
    }

    render() {
        return (
            <div className='search'>
                <NavBar back='返回' onBack={() => { this.back() }}>搜索</NavBar>
                <SearchBar placeholder='搜索店铺内商品' showCancelButton={() => true} onSearch={(e) => { this.getValue(e) }} />
                <div className="lasear">
                    <div className="latop">
                        <div>最近搜索</div>
                        <DeleteOutline fontSize={12} onClick={() => { this.clearsearch() }} />
                    </div>
                    <div className="spase">
                        {
                            this.state.seacrlist.map((item, index) => {
                                return <span key={index}>{item}</span>
                            })
                        }
                    </div>
                </div>
                <div className="hotsear">
                    <div>热门搜索</div>
                    <div className="spase">
                        <span>好吃的</span>
                        <span>香水</span>
                        <span>腕表</span>
                    </div>
                </div>
                <div className="goodsli">
                    <div className="seatit"><div>搜索结果</div></div>
                    {
                        this.state.seargoodlist.map((item, index) => {
                            return (
                                <div className="goodo" key={index} onClick={() => { this.getgoodintrs(item.id) }}>
                                    <img src={item.pic} alt="" />
                                    <div className="goodri">
                                        <p>{item.name}</p>
                                        <i>免税价：￥{item.salesPrice.value}</i>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Search;